<script setup lang="ts">
/*
1:.vue  可以写ts也可以写js，包括类型申明 
2: .ts  写ts且包括类型申明   type  interface等
3:.d.ts 只写类型申明（会自动读取）,常用于项目中类型的封装

类型申明
  1：ts提供(如数组方法之类)
  2:插件
      部分插件已有类型申明(.d.ts文件)如：axios 可以直接用
      有些插件没有类型申明   npm i @types/插件名  如 ：qrcode  下载  npm i @types/qrcode
  3:提供了js代码但没有类型申明
    自己写类型申明：
      创建一个同名的.d.ts文件
        declare 申明 相应的类型
          如 js  const xxx={a:999}
            .d.ts declare const xxx:{a:number}

*/

import { ref } from 'vue'
import type { TArr } from './types/xxx.js'
// 二维码  qrcode
import qrcode from 'qrcode'

import { add } from './test.js'

console.log(add(3, 6))

console.log(qrcode)

// 插件类型申明安装  npm i  @types/插件名  如：npm i @types/qrcode

//  type表明导入的是类型 打包时直接跳过
const list = ref<TArr>([])
list.value.push({
  name: '张三'
})
</script>

<template>
  <div v-for="(item, index) in list" :key="index">{{ item.name }}</div>
</template>

<style></style>
